<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<style>
			.first{
				color:#666;
				display:inline-block;
				vertical-align:top;
				border:1px solid #e6e6e6;
				padding:5px 9px;
				font-size:12px;
			}
			#number{
				display:inline-block;
				vertical-align:top;
			}
			.num{
				color:#666;
				display:inline-block;
				vertical-align:top;
				border:1px solid #e6e6e6;
				padding:5px 9px;
				font-size:12px;
				margin-right:6px;
			}
			.current{
				color:#3e89fa;
				font-size:12px;
				display:inline-block;
				vertical-align:top;
				margin-left:30px;
				padding:5px 9px;
			}
			#inp{
				height:32px;
				width:32px;
			}
			.jump{
				display:inline-block;
				vertical-align:top;
				font-size:12px;
			}
			.l_jump{
				display:inline-block;
				vertical-align:top;
				padding:5px 9px;
				border:1px solid #e6e6e6;
			}
		</style>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
		<div>
			<div class="first" id="home">首页</div>
			<div class="first" id="before">上一页</div>
			<div id="number">
				
			</div>
			<div class="first" id="next">下一页</div>
			<div class="first" id="last">尾页</div>
      <div class="first" style="width: 145px;">
        每页显示
        <select id="selectPage" οnchange="select()" style="width: 35%">
          <option value="3" selected>3</option>
          <option value="6">6</option>
          <option value="14">14</option>
          <option value="100">100</option>
        </select>
        条记录
      </div>
      <div class="first">
        总共 <span id="taTalDataNumber">20</span> 条记录 
      </div>
			<div class="current"></div>
			<div class="jump">
				<input type="text" id="inp"></input>
				<div class="l_jump">跳转</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var sign=1;//记录当前第几个块，比如我规定最多显示10个块，那么sign的取值范围就是1-10
		var b_sign=1;//记录sign变动之前的sign数值
		var count=20;//记录总共页数
		var real_count=count<=10?count:10;//定义最多有多少块
		var real_change=0;
		var o=0;
		if(real_count%2==0)
		{
			real_change=real_count/2;
		}
		else 
		{
			real_change=real_count/2+0.5;
			var o=1;
		}
		//初始化块
		let i=1;
		while(i<=real_count)
		{
			var val="<div class='num' id="+i+">"+i+"</div>";
			$("#number").append(val)
			i++;
		}
		
		function query_all(){//查找id='number'块的所有子节点
			nodes=$("#number").find("div");
			length=nodes.length;
		}
		query_all();
		
		function currentPage(){//获取当前page
			let use="#"+sign;
			$(".current").text("当前"+$(use).text()+"/"+count+"页");
		}		
		currentPage();
		
		var b_change=function(){//将当前第sign块样式还原
			b_sign=sign;
			let use="#"+b_sign;
			$(use).css({"border":"1px solid #e6e6e6","color":"#666"});
		}
		var blue_change=function(c){//将当前sign块样式改变，好区别于其他块
			let use="#"+c;
			$(use).css({"border":"none","color":"#3e89fa"});
		}
		blue_change(sign);//页面第一次加载的时候，改变指定块样式
 
		function go_back(now_sign,kit){//当前sign块先还原样式,再改变sign,再改变改变后的sign块样式
			b_change();
			if(kit==0)
			{
				sign=now_sign;
			}
			else if(kit==1)
			{
				if(sign!=real_count)
				sign++;
			}
			else if(kit==2)
			{
				if(sign!=1)
				sign--;
			}
			blue_change(sign);
		}
		function change_add(c_add,kit){//遍历改变id='number'的子节点内容
			let p=c_add;
			for(let j=0;j<length;j++)
			{
				if(kit==0){
					nodes[j].innerHTML=p;
					p++;
				}else if(kit==1){
					nodes[j].innerHTML=p;
					p--;
				}else if(kit==2){
					nodes[j].innerHTML=parseInt(nodes[j].innerHTML)+1;
				}else if(kit==3){
					nodes[j].innerHTML=parseInt(nodes[j].innerHTML)-1;
				}			
			}
		}
		
		function for_num(use,id){
			let error_1="#"+real_change;
			//页面在最前或最后
			if($(error_1).text()==real_change||$(error_1).text()==count-real_change+1)
			{
				//判断点击的第一个一半的前面还是点击的第二个一半的后面
				if($(use).text()<=real_change||$(use).text()>count-real_change)
				{
					go_back(id,0);
				}
				else
				{
					go_back(real_change,0);
					change_add($(use).text()-(real_change-1),0);
				}
				currentPage();
			}
			else
			{
				var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
				if($(use).text()<=real_change||inner)
				{
					if($(use).text()<=real_change)
					{
						go_back($(use).text(),0);
						change_add(1,0);
					}
					else
					{
						go_back(real_count-(count-$(use).text()),0);
						change_add(count-real_count+1,0);
					}
				}
				else
				{
					go_back(real_change,0);
					change_add($(use).text()-(real_change-1),0);
				}	
			}
			currentPage();
		}
		//遍历每个子div块，并为他们增加点击事件
		for(let j=0;j<length;j++)
		{
			let id=nodes[j].getAttribute("id");
			let use="#"+id;
			$(use).bind("click",function(){
				for_num(use,id);
			});
		}
		
		$("#home").bind("click",function(){
			go_back(1,0);
			change_add(1,0);
			currentPage();
		});
		$("#last").bind("click",function(){
			go_back(real_count,0);
			change_add(count-real_count+1,0);
			currentPage();
		});
		$("#before").bind("click",function(){
			let use="#"+sign;
			var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change+1;
			if($(use).text()<=real_change||inner)
			{
				go_back(0,2);
				currentPage();
			}
			else
			{
				change_add(0,3);
				currentPage();
			}
		});
		$("#next").bind("click",function(){
			let use="#"+sign;
			
			if($(use).text()!=count)
			{
				var inner=(o==0)?$(use).text()>=count-real_change:$(use).text()>count-real_change;
				if($(use).text()<real_change||inner)
				{
					go_back(0,1);
					currentPage();
				}
				else
				{
					change_add(0,2);
					currentPage();
				}
			}
		});
		$(".l_jump").bind("click",function(){
			let val=$("#inp").val();//获取输入框的值
			val=parseInt(val);
			if(val>=1&&val<=count)
			{
				var inner=(o==0)?val>=count-real_change:val>count-real_change;
				if(val<=real_change||inner)//如果是在最前面的一半以前，或者是在最后面的一半以后
				{
					if(val<=real_change)
					{
						go_back(val,0);
						change_add(1,0);
					}
					else
					{
						go_back(real_count-(count-val),0);
						change_add(count-real_count+1,0);
					}
				}
				else
				{
					go_back(real_change,0);
					change_add(val-(real_change-1),0);
				}
			}
			else
			{
				alert("没有这么多页");
			}
			currentPage();
		});
	</script>
  <script>
    
/**
 * 选择每页显示数据条数
 */
 function select(){
    $("#endPageNumber").text(" "+$("#selectPage").val())
    initSelect();

    
      // t = $("#selectPage").val()
      // $("#endPageNumber").text(" "+$("#selectPage").val())
      // go_back(1,0);
			// change_add(1,0);
			// currentPage();
}
/**
 * 初始化选择每页显示数据
 */
function initSelect(){
    showDataNumber(1);
    getPageData(1);
    page();
}
      /**
 * 分页控件处理
 */
function page() {
    if (typeof (fileData) != "undefined" &&  fileData != null) {
        var totalData = fileData.length;
        var showData = $("#selectPage").val();
        if(showData > totalData){
            showData = totalData;
        }
        $('.M-box').pagination({
            totalData: totalData,
            showData: showData,
            coping: true,
            callback: function (index) {
                //改变显示开始和结束数据编号
                showDataNumber(index.getCurrent());
                getPageData(index.getCurrent());
            }
        });
    }
}
      /**
       * 获取本页数据
       * @param currentPage 当前页数 【初次查数据，默认第1页】
       */
      function getPageData(currentPage) {
        if (typeof fileData != 'undefined' && fileData != null) {
          //计算每页数据起始和终止数据编号
          var pageNumber = $('#selectPage').val()
          var maxLength = currentPage * pageNumber - 1
          var minLength = currentPage * pageNumber - pageNumber
          var pageData = []
          for (var i = minLength; i < fileData.length; i++) {
            if (maxLength < i) {
              break
            } else {
              pageData.push(fileData[i])
            }
          }
          htmlData(pageData)
        } else {
          //把空数据传到页面中去
          htmlData(fileData)
        }
      }
      function showDataNumber(currentPage) {
        // var endNumber = currentPage * $('#selectPage').val()
        // $('#endPageNumber').text(' ' + endNumber)
        // var startNumber = (currentPage - 1) * $('#selectPage').val() + 1
        // $('#startPageNumber').text(' ' + startNumber)
        if (fileData == null) {
          $('#taTalDataNumber').text(' ' + 0)
        } else {
          $('#taTalDataNumber').text(' ' + fileData.length)
        }
      }
      function htmlData(fileDataS) {
        $('.main').html('')
        if (fileDataS == null) {
          $('.main').html('')
          $('.M-box').hide()
        } else {
          $('.M-box').show()
          $.each(fileDataS, function (index, file) {
            var html =
              '<div class="gis_downloadmian"><span class="gis_word">' +
              file.fileName +
              '</span>' +
              ' 所属项目：' +
              file.projectId +
              ' 下载次数：【下载<a class="gis_color" id="down' +
              file.id +
              '">' +
              file.downloadNumber +
              '</a>次】' +
              ' 所属文件库：建设批复文件' +
              ' 项目年份：2016' +
              ' 更新时间：' +
              dateHandle(file.createtime) +
              '<a onclick="downloadFile(' +
              file.id +
              ')" class="gis_downbtn" >下载</a></div>'
            $('.main').append(html)
          })
        }
      }
  </script>
</html>